<template>
  <!-- 录制标题和状态显示 -->
  <div class="recorder-header">
    <h1 class="recorder-title">音视频录制工具</h1>
    <div class="status-indicator" :class="statusClass">
      <span class="status-dot"></span>
      <span class="status-text">{{ statusText }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RecorderStatus } from '@renderer/types/enums/recoder.enum'
import { useImChatStore } from '@renderer/store'
const imChatStore = useImChatStore()
const recordStatus = computed(() => imChatStore.recordStatus)
// 状态样式类
const statusClass = computed(() => {
  if (recordStatus.value == RecorderStatus.RECORDING) return 'recording'
  if (recordStatus.value == RecorderStatus.PAUSE) return 'paused'
  if (recordStatus.value == RecorderStatus.COMPLETE) return 'completed'
  return 'ready'
})

// 状态文本
const statusText = computed(() => {
  if (recordStatus.value == RecorderStatus.RECORDING) return '正在录制...'
  if (recordStatus.value == RecorderStatus.PAUSE) return '已暂停'
  if (recordStatus.value == RecorderStatus.COMPLETE) return '已完成录制'
  return '准备就绪'
})
</script>

<style lang="scss" scoped>
.recorder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .recorder-title {
    margin: 0;
    font-size: 24px;
    color: #2c3e50;
    font-weight: 600;
  }

  .status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;

    &.ready {
      background-color: #e3f2fd;
      color: #1976d2;
    }

    &.recording {
      background-color: #ffebee;
      color: #d32f2f;
    }

    &.paused {
      background-color: #fff8e1;
      color: #f57c00;
    }

    &.completed {
      background-color: #e8f5e9;
      color: #388e3c;
    }

    .status-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(black, transparent);
      @at-root .status-indicator.ready & {
        background-color: #1976d2;
      }

      @at-root .status-indicator.recording & {
        background-color: #d32f2f;
        animation: pulse 1.5s infinite;
      }

      @at-root .status-indicator.paused & {
        background-color: #f57c00;
      }

      @at-root .status-indicator.completed & {
        background-color: #388e3c;
      }
    }
  }
}
</style>
